<template>
	<div>
		<mj-title type="h2" title="Tabs 标签页"></mj-title>
		<div class="page-desc">选项卡切换组件，你可以设置<code>activeName</code>属性来设置当前选中的标签页</div>

		<mj-title type="h5" title="基础用法"></mj-title>
		<mj-tabs v-model='activeName' @click="changeTab">
			<mj-tab-pane label="Tab1"  name="name1"><center>标签一内容</center></mj-tab-pane>
			<mj-tab-pane label="Tab2" name="name2"><center>标签二内容</center></mj-tab-pane>
			<mj-tab-pane label="Tab3" name="name3"><center>标签三内容</center></mj-tab-pane>
		</mj-tabs>
		<mj-divider>Code</mj-divider>
		<div class="mb50">
			<pre>
				<code class="language-javascript line-numbers">&lt;template>
					&lt;mj-tabs v-model='activeName' @click="changeTab">
						&lt;mj-tab-pane label="Tab1" name="name1">标签一内容&lt;/mj-tab-pane>
						&lt;mj-tab-pane label="Tab2" name="name2">标签二内容&lt;/mj-tab-pane>
						&lt;mj-tab-pane label="Tab3" name="name3">标签三内容&lt;/mj-tab-pane>
					&lt;/mj-tabs>
				&lt;/template>
				&lt;script>
					export default {
						data() {
							return {
								activeName: 'name1',
							}
						},
						methods:{
							changeTab(name) {
								console.log(name)
							},
						}
					}
				&lt;/script>
				</code>
			</pre>
		</div>

		<mj-title type="h5" title="可关闭"></mj-title>
		<div class="page-desc" style="margin-bottom: 10px;">通过设置属性 closable 可以关闭某一项。需结合 @on-tab-remove 事件手动关闭标签页。</div>
		<mj-tabs animated @on-tab-remove="handleTabRemove">
			<mj-tab-pane label="Tab1" name="name1" closable v-if="tabname1"><center>标签一内容</center></mj-tab-pane>
			<mj-tab-pane label="Tab2" name="name2" closable v-if="tabname2"><center>标签二内容</center></mj-tab-pane>
			<mj-tab-pane label="Tab3" name="name3" closable v-if="tabname3"><center>标签三内容</center></mj-tab-pane>
		</mj-tabs>
		<mj-divider>Code</mj-divider>
		<div class="mb50">
			<pre>
				<code class="language-javascript line-numbers">&lt;template>
					&lt;mj-tabs @on-tab-remove="handleTabRemove">
						&lt;mj-tab-pane label="Tab1" name="name1" closable v-if="tabname1">标签一内容&lt;/mj-tab-pane>
						&lt;mj-tab-pane label="Tab2" name="name2" closable v-if="tabname2">标签二内容&lt;/mj-tab-pane>
						&lt;mj-tab-pane label="Tab3" name="name3" closable v-if="tabname3">标签三内容&lt;/mj-tab-pane>
					&lt;/mj-tabs>
				&lt;/template>
				&lt;script>
					export default {
						data() {
							return {
								tabname1: true,
								tabname2: true,
								tabname3: true
							}
						},
						methods:{
							handleTabRemove(name) {
								this['tab' + name] = false;
							},
						}
					}
				&lt;/script>
				</code>
			</pre>
		</div>

		<mj-title type="h5" title="位置"></mj-title>
		<div class="page-desc">可以通过 tab-position 设置标签的位置(目前只支持top、left)</div>

		<mj-tabs v-model='activeName' tab-position="left" @click="changeTab">
			<mj-tab-pane label="Tab1"  name="name1"><center>标签一内容</center></mj-tab-pane>
			<mj-tab-pane label="Tab2" name="name2"><center>标签二内容</center></mj-tab-pane>
			<mj-tab-pane label="Tab3" name="name3"><center>标签三内容</center></mj-tab-pane>
		</mj-tabs>
		<mj-divider>Code</mj-divider>
		<div class="mb50">
			<pre>
				<code class="language-javascript line-numbers">&lt;template>
					&lt;mj-tabs v-model='activeName' tab-position="left" @click="changeTab">
						&lt;mj-tab-pane label="Tab1" name="name1">标签一内容&lt;/mj-tab-pane>
						&lt;mj-tab-pane label="Tab2" name="name2">标签二内容&lt;/mj-tab-pane>
						&lt;mj-tab-pane label="Tab3" name="name3">标签三内容&lt;/mj-tab-pane>
					&lt;/mj-tabs>
				&lt;/template>
				&lt;script>
					export default {
						data() {
							return {
								activeName: 'name1',
							}
						},
						methods:{
							changeTab(name) {
								console.log(name)
							},
						}
					}
				&lt;/script>
				</code>
			</pre>
		</div>

		<mj-title type="h5" title="卡片式风格"></mj-title>
		<mj-tabs type="card">
			<mj-tab-pane label="Tab1" name="name1"><center>标签一内容</center></mj-tab-pane>
			<mj-tab-pane label="Tab2" name="name2"><center>标签二内容</center></mj-tab-pane>
			<mj-tab-pane label="Tab3" name="name3"><center>标签三内容</center></mj-tab-pane>
		</mj-tabs>
		<mj-divider>Code</mj-divider>
		<div class="mb50">
<pre>
<code class="language-html line-numbers">&lt;template>
	&lt;mj-tabs type="card">
		&lt;mj-tab-pane label="Tab1" name="name1">标签一内容&lt;/mj-tab-pane>
		&lt;mj-tab-pane label="Tab2" name="name2">标签二内容&lt;/mj-tab-pane>
		&lt;mj-tab-pane label="Tab3" name="name3">标签三内容&lt;/mj-tab-pane>
	&lt;/mj-tabs>
&lt;/template>
</code>
</pre>
		</div>

		<mj-title type="h5" title="附加内容"></mj-title>
		<mj-tabs>
			<mj-tab-pane label="Tab1" name="name1"><center>标签一内容</center></mj-tab-pane>
			<mj-tab-pane label="Tab2" name="name2"><center>标签二内容</center></mj-tab-pane>
			<div slot="extra">
				<mj-button type="primary" size="small">更多</mj-button>
			</div>
		</mj-tabs>
		<mj-divider>Code</mj-divider>
		<div class="mb50">
<pre>
<code class="language-html line-numbers">&lt;template>
	&lt;mj-tabs>
		&lt;mj-tab-pane label="Tab1" name="name1">&lt;center>标签一内容&lt;/center>&lt;/mj-tab-pane>
		&lt;mj-tab-pane label="Tab2" name="name2">&lt;center>标签二内容&lt;/center>&lt;/mj-tab-pane>
		&lt;div slot="extra">
			&lt;mj-button type="primary" size="small">更多&lt;/mj-button>
		&lt;/div>
	&lt;/mj-tabs>
&lt;/template>
</code>
</pre>
		</div>

		<mj-title type="h5" title="启用动画切换"></mj-title>
		<mj-tabs :animated="true">
			<mj-tab-pane label="Tab1" name="name1"><center>标签一内容</center></mj-tab-pane>
			<mj-tab-pane label="Tab2" name="name2"><center>标签二内容</center></mj-tab-pane>
			<mj-tab-pane label="Tab3" name="name3"><center>标签三内容</center></mj-tab-pane>
		</mj-tabs>
		<mj-divider>Code</mj-divider>
		<div class="mb50">
			<pre>
				<code class="language-html line-numbers">&lt;template>
					&lt;mj-tabs :animated="true">
						&lt;mj-tab-pane label="Tab1" name="name1">标签一内容&lt;/mj-tab-pane>
						&lt;mj-tab-pane label="Tab2" name="name2">标签二内容&lt;/mj-tab-pane>
						&lt;mj-tab-pane label="Tab3" name="name3">标签三内容&lt;/mj-tab-pane>
					&lt;/mj-tabs>
				&lt;/template>
				</code>
			</pre>
		</div>

		<mj-title type="h5" title="禁用某一项"></mj-title>
		<mj-tabs>
			<mj-tab-pane label="Tab1" name="name1"><center>标签一内容</center></mj-tab-pane>
			<mj-tab-pane label="Tab2" name="name2" disabled><center>标签二内容</center></mj-tab-pane>
			<mj-tab-pane label="Tab3" name="name3"><center>标签三内容</center></mj-tab-pane>
		</mj-tabs>
		<mj-divider>Code</mj-divider>
		<div class="mb50">
			<pre>
				<code class="language-html line-numbers">
				&lt;template>
					&lt;mj-tabs :animated="true">
						&lt;mj-tab-pane label="Tab1" name="name1">标签一内容&lt;/mj-tab-pane>
						&lt;mj-tab-pane label="Tab2" name="name2" disabled>标签二内容&lt;/mj-tab-pane>
						&lt;mj-tab-pane label="Tab3" name="name3">标签三内容&lt;/mj-tab-pane>
					&lt;/mj-tabs>
				&lt;/template>
				</code>
			</pre>
		</div>

		<mj-title type="h5" title="自定义标签"></mj-title>
		<mj-tabs>
			<mj-tab-pane name="name1">
				<span slot="label"><i class="icon icon-cloud-upload"></i> 我的自定义标签</span>
				<center>标签一内容</center>
			</mj-tab-pane>
			<mj-tab-pane label="Tab2" name="name2"><center>标签二内容</center></mj-tab-pane>
			<mj-tab-pane label="Tab3" name="name3"><center>标签三内容</center></mj-tab-pane>
		</mj-tabs>
		<mj-divider>Code</mj-divider>
		<div class="mb50">
			<pre>
				<code class="language-html line-numbers">&lt;template>
					&lt;mj-tabs>
						&lt;mj-tab-pane name="name1">
							&lt;span slot="label">&lt;i class="icon icon-cloud-upload">&lt;/i> 我的自定义标签&lt;/span>
							&lt;center>标签一内容&lt;/center>
						&lt;/mj-tab-pane>
						&lt;mj-tab-pane label="Tab2" name="name2">&lt;center>标签二内容&lt;/center>&lt;/mj-tab-pane>
						&lt;mj-tab-pane label="Tab3" name="name3">&lt;center>标签三内容&lt;/center>&lt;/mj-tab-pane>
					&lt;/mj-tabs>
				&lt;/template>
				</code>
			</pre>
		</div>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Tabs 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>value / v-model</td>
					<td>当前激活 tab 面板的 name，可以使用 v-model 双向绑定数据</td>
					<td>String</td>
					<td>第一个选项卡的 name</td>
				</tr>
				<tr>
					<td>type</td>
					<td>风格类型，可选<code>card</code></td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>animated</td>
					<td>启用动画切换tab pane</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>tab-position</td>
					<td>选项卡所在位置 top | left</td>
					<td>String</td>
					<td>top</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Tabs slot参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>名称</th>
					<th>说明</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>extra</td>
					<td>在tab右侧添加其他元素</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Tab Pane参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>label</td>
					<td>选项卡标题</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>name</td>
					<td>用于标识当前面板，对应 value，默认为其索引值</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>disabled</td>
					<td>是否禁用该选项卡</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>closable</td>
					<td>该选项卡是否可关闭</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Tabs 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>回调</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>click</td>
					<td>tab切换时触发</td>
					<td></td>
				</tr>
				<tr>
					<td>on-tab-remove</td>
					<td>关闭当前pane触发的事件</td>
					<td>返回当前name</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	data() {
		return {
			activeName: 'name1',
			tabname1: true,
			tabname2: true,
			tabname3: true,
		}
	},
	methods:{
		changeTab(name) {
			console.log(name)
		},
		handleTabRemove(name) {
			this['tab' + name] = false
		}
	}
}
</script>
